<template>
	<div class="dialog-container">
		<el-dialog :title="state.dialog.title" v-model="state.dialog.isShowDialog" :close-on-click-modal="false" width="500px">
			<el-form ref="formRef" :model="state.ruleForm" :rules="state.rules">
				<el-row class="mb20" :gutter="20">
					<el-col :span="24">
						<el-form-item label="分配角色" prop="role_ids">
							<el-select
								v-model="state.ruleForm.role_ids"
								clearable
								filterable
								multiple
								collapse-tags
								collapse-tags-tooltip
								:max-collapse-tags="3"
								placeholder="请选择角色"
							>
								<el-option v-for="item in state.roleIdsOption" :key="item.id" :label="item.name" :value="item.id" />
							</el-select>
						</el-form-item>
					</el-col>
				</el-row>
			</el-form>
			<template #footer>
				<el-button @click="onCancel" size="default">取 消</el-button>
				<el-button type="primary" @click="onSubmit" :loading="state.dialog.submitLoading" size="default">提 交</el-button>
			</template>
		</el-dialog>
	</div>
</template>

<script lang="ts" setup>
import { ElMessage } from 'element-plus';
import { nextTick, reactive, ref } from 'vue';
import { adminApi, rolesApi } from '/@/api';

let callback: Function = () => {};
const AdminApi = adminApi();
const RolesApi = rolesApi();
const state = reactive({
	dialog: {
		isShowDialog: false,
		type: '',
		title: '',
		submitLoading: false,
	},
	ruleForm: {
		admin_id: '',
		role_ids: [],
	},
	rules: {
		role_ids: [{ required: true, message: '分配角色不能为空', trigger: ['blur'] }],
	},
	isShowPassword: false,
	roleIdsOption: [] as any,
});
const formRef = ref();

/********** 触发事件 **********/
// 取消
const onCancel = () => {
	state.dialog = {
		isShowDialog: false,
		type: '',
		title: '',
		submitLoading: false,
	};
};
// 提交
const onSubmit = () => {
	formRef.value.validate((valid: boolean) => {
		if (!valid) return;
		console.log('state.ruleForm', state.ruleForm);

		state.dialog.submitLoading = true;
		_adminAssignRoles({
			...state.ruleForm,
			role_ids: state.ruleForm.role_ids.join(','),
		});
	});
};

/********** 方法事件 **********/
// 打开
const openDialog = (row: any) => {
	state.dialog = {
		isShowDialog: true,
		type: '',
		title: `「${row.nickname}」分配角色`,
		submitLoading: false,
	};
	_rolesList({});
	nextTick(() => {
		formRef.value.resetFields();
		_adminInfo({ admin_id: row.id });
	});
};

/********** 网络请求 **********/
// 角色列表
const _rolesList = (params: Object) => {
	RolesApi.rolesList(params).then((res: any) => {
		state.roleIdsOption = res.data.list;
	});
};
// 获取管理员信息
const _adminInfo = (params: Object) => {
	AdminApi.adminInfo(params)
		.then((res) => {
			state.ruleForm = {
				admin_id: res.data.info.id,
				role_ids: res.data.info.role_ids.split(',').map((item:any) => Number(item)),
			};
		})
};
// 管理员分配角色
const _adminAssignRoles = (params: Object) => {
	AdminApi.adminAssignRoles(params)
		.then(() => {
			ElMessage.success('操作成功！');
			onCancel();
			callback();
		})
		.catch(() => (state.dialog.submitLoading = false));
};

/********** 方法向父组件暴露 **********/
defineExpose({ openDialog });
</script>
